<!DOCTYPE html>
<html>

<head>
    <title>Vue 3 动态样式</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /* <!-- 组件 --> */
        .container {
            padding: 20px;
            transition: all 0.3s ease;
        }

        /* 浅色 */

        .light-theme {
            background: white;
            color: black;
        }
/* 深色 */
        .dark-theme {
            background: #333;
            color: white;
        }

        .card {
            padding: 20px;
            margin: 10px 0;
            border-radius: 5px;
        }
        /* 激活 */

        .active {
            border-left: 4px solid #4CAF50;
        }
        /* 重要 */

        .important {
            font-weight: bold;
            color: #e74c3c;
        }

        .theme-button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="['container',theme]">
            <h3>主题切换器</h3>

            <button class="theme-button" v-bind:style="anniu('light')" v-on:click="gaibian('light')">
                浅色主题
            </button>
            <button class="theme-button" v-bind:style="anniu('dark')" v-on:click="gaibian('dark')">
                深色主题
            </button>

            <div class="card" :class="{active:isActive,important:isImportant}">
                <p>这是一个动态样式演示卡片</p>
                <p>当前主题:</p>
            </div>

            <div>
                <label>
                    <input type="checkbox" v-model="isActive"> 激活状态
                </label>
                <label>
                    <input type="checkbox" v-model="isImportant"> 重要状态
                </label>
            </div>

            <div >
                这个元素的样式是动态绑定的
            </div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    theme:'light-theme',
                    isActive:true,
                    isImportant:false
                }
            },
            methods: {
                gaibian(newZhuti){
                    this.theme=newZhuti+'-theme'

                },
                anniu(newAnniu){
                    return{
                        // 判断当前的是否和当前的主题一致，一致红色，不一致黑色
                        backgroundColor:this.theme.includes(newAnniu)?"red":"#000",
                        color:"#fff"
                    }
                }
            },

        }).mount("#app")
       
    </script>
</body>

</html>